<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mycommon.js"></script>
		<style>
			.img1 {
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item><i class="el-icon-s-home"></i> <a href="index.html"
						target="_top">首页</a></el-breadcrumb-item>
				<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			</el-breadcrumb>
			<div id="box2">
				<h3><img src="img/矩形 1.png" class="img1" /> 用户管理</h3>
				<hr />
				<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="elForm">
					<el-form-item label="用户名称">
						<el-input v-model="formInline.user" placeholder="请输入用户名称"></el-input>
					</el-form-item>
					<el-form-item label="角色">
						<el-select v-model="formInline.region" placeholder="请选择角色">
							<el-option label="系统管理员" value="shanghai"></el-option>
							<el-option label="店员" value="beijing"></el-option>
							<el-option label="顾客" value="beijing"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="性别">
						<el-select v-model="formInline.sex" placeholder="请选择性别">
							<el-option label="男" value="sex1"></el-option>
							<el-option label="女" value="sex2"></el-option>
						</el-select>
					</el-form-item>
					<br />
					<el-form-item label="地址">
						<el-input v-model="formInline.address" placeholder="请输入地址"></el-input>
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model="formInline.phone" placeholder="请输入电话"></el-input>
					</el-form-item>
					<el-form-item label="邮箱">
						<el-input v-model="formInline.email" placeholder="请输入邮箱"></el-input>
					</el-form-item>
					<br />
					<el-form-item>
						<el-button type="primary" @click="onSubmit">查询</el-button>
						<el-button @click="resetForm">重置</el-button>
					</el-form-item>
					<br />
					<el-form-item>
							<el-button type="primary" @click="open">+ 新增用户</el-button>
						</el-form-item>
					</el-form>
				</el-form>
				<template>
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column prop="username" label="用户名称" width="180">
						</el-table-column>
						<el-table-column prop="password" label="密码" width="180">
						</el-table-column>
						<el-table-column prop="address" label="地址">
						</el-table-column>
						<el-table-column prop="phone" label="电话">
						</el-table-column>
						<el-table-column prop="email" label="邮箱">
						</el-table-column>
						<el-table-column prop="sex" label="性别">

						</el-table-column>
						<el-table-column prop="role" label="角色">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="primary" size="mini"
									@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
								<el-button size="mini" type="danger"
									@click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
				<el-pagination background layout="prev, pager, next" :total="tocal" :page-size="pagesize"
					@current-change="handleCurrentChange">
				</el-pagination>

			</div>
		</div>
		<script>
			new Vue({
				el: "#box1",
				data: {
					tableData: [{
						username: '',
						password: '',
						phone: '',
						email: '',
						sex: '',
						role: ''
					}],
					page: 1, //当前第几页
					tocal: 0, //总条数
					pagesize: 3, //每页条数	
					formInline: {
						user: '',
						region: ''
					},
				},
				methods: {
					handleEdit(index, row) {

					},
					handleDelete(index, row) {

					},
					initdata() {
						var that = this
						//ajax请求后端接口获取json数据
						axios.get(HTTP + "selectAllPage/" + this.page).then(function(res) {
							//alert(JSON.stringify(res));
							that.tableData = res.data.data.pageInfo.list
							that.tocal = res.data.data.pageInfo.total
						}).catch(err => {
							console.log(err)
						});
					},
					handleCurrentChange(val) { //分页
						this.page = val //舍子当前页
						this.initdata() //发送ajax请求重新获取数据
					},
					onSubmit() {
						console.log('submit!');
					},
					resetForm() {
						this.$refs['elForm'].resetFields()
					},
					open(){
						
					},
				},
				mounted() {
					this.initdata();
				}
			})
		</script>
	</body>
</html>